<script setup>
import { dutyGetTimeServe, dutyStuUploadTimeServe } from '@/api/duty'
import { useFormatStore, useUserStore } from '@/stores'
import { changeDutySelectList } from '@/utils/dutyListChange'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'

const {
  user: { stu_id }
} = useUserStore()

//格式
const formatStore = useFormatStore()
const { format, columnLabels } = storeToRefs(formatStore)

const drawerVisible = ref(false)
const dutySelectList = ref([])

const onOpenUploadTime = async () => {
  drawerVisible.value = true
  const res = await dutyGetTimeServe({ stu_id: stu_id })
  dutySelectList.value = changeDutySelectList(res.record)
  ElMessage.success({ message: '获取成功', offset: 70 })
}
const onUploadTime = async () => {
  await dutyStuUploadTimeServe({ stu_id: stu_id, time: changeDutySelectList(dutySelectList.value) })
  ElMessage.success({ message: '提交成功', offset: 70 })
  onOpenUploadTime()
}

defineExpose({
  onOpenUploadTime
})
</script>

<template>
  <el-drawer v-model="drawerVisible" title="空闲时段表" direction="rtl" size="50%">
    <div>
      <el-button type="primary" size="default" @click="onUploadTime">提交</el-button>
      <el-button size="default" @click="onOpenUploadTime">刷新</el-button>
    </div>
    <div style="margin-top: 10px">
      <el-table :data="format" style="width: 100%" border>
        <!-- 表左边 -->
        <el-table-column label="时间" prop="" width="120px" align="center">
          <template #default="{ row }">
            <div>{{ row.index }}</div>
            {{ row.start + '-' }}{{ row.end }}
          </template>
        </el-table-column>
        <!-- 主体 -->
        <el-table-column
          v-for="(label, index) in columnLabels"
          :key="index"
          :label="label"
          align="center"
        >
          <template v-slot="scope">
            <el-switch
              v-model="dutySelectList[index * 5 + scope.$index]"
              style="--el-switch-on-color: #13ce66"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-drawer>
</template>

<style lang="" scoped></style>
